<template>
  <div>
    <el-row>
      <el-col :span="3">
        <el-input
          placeholder="请输入id"
          v-model="page.id"
          maxlength="12"
        >
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-input
          placeholder="请输入邮箱"
          v-model="page.email"
        >
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-search" @click="search" type="success"
          >搜索
        </el-button>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-delete" @click="reset" type="info"
          >重置
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="user" border>
      <el-table-column prop="head" label="头像" align="center">
        <template slot-scope="scope">
          <el-avatar size="medium" :src="scope.row.head"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="nickName" label="昵称"> </el-table-column>
      <el-table-column label="性别" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column label="用户状态">
        <template slot-scope="scope">
          <el-switch
            @change="handStatus(scope.row)"
            style="display: block"
            v-model="scope.row.status"
            :active-value="0"
            :inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="启用"
            inactive-text="禁用"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popconfirm
            title="确认重置密码？"
            confirm-button-text="确认"
            cancel-button-text="取消"
            @confirm="handleReset(scope.row)"
          >
            <el-button slot="reference" type="text" size="small"
              >重置密码</el-button
            >
          </el-popconfirm>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-popconfirm
            title="确认删除？"
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button slot="reference" type="text" size="small" style="color: red;"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[6, 21, 27, 36]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getList, updateStatus, resetPwd,deleteUser } from "../api/usrMG";

export default {
  name: "UserView",
  data() {
    return {
      page: {
        currentPage: 1,
        pageSize: 6,
        total: 20,
        id: "",
        email: "",
      },
      user: [],
    };
  },
  methods: {
    reset(){
      //点击重置
      this.page.currentPage = 1;
      this.page.id="",
      this.page.email="",
      this.getUser();
    },
    search() {
      //点击搜索
      this.page.currentPage = 1;
      this.getUser();
    },
    async handleDelete(id){
      //根据用户id删除用户
      await deleteUser(id).then(res=>{
        if (res.data.code == 200) {
          this.getUser();
          this.$message.success("删除成功!");
        } else {
          this.getUser();
          this.$message.error("删除失败");
        }
      })
    },
   async handleReset(value) {
      //重置密码
      // console.log(value);
      await resetPwd(value).then((res) => {
        if (res.data.code == 200) {
          this.getUser();
          this.$message.success("重置密码成功!");
        } else {
          this.getUser();
          this.$message.error("重置密码失败");
        }
      });
    },
    async handStatus(value) {
      // 改变用户状态触发事件请求后端
      // console.log(value)
      await updateStatus(value).then((res) => {
        if (res.data.code == 200) {
          this.getUser();
          this.$message.success("修改成功!");
        } else {
          this.getUser();
          this.$message.error("修改失败");
        }
      });
    },
    async getUser() {
      await getList(this.page).then((res) => {
        if (res.data.code == 200) {
          this.page.total = res.data.data.total;
          this.user = res.data.data.list;
        } else {
          this.$message.error("获取用户数据失败");
        }
      });
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      //重新获取列表数据
      this.getUser()
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      //重新获取列表数据
      this.getUser()
    },
  },
  mounted() {
    this.getUser();
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-switch .el-switch__label--left) {
  color: #979690;
}
:deep(.el-switch .el-switch__label--right) {
  color: #979690;
}
:deep(.el-switch .el-switch__label--left.is-active) {
  color: red;
}
:deep(.el-switch .el-switch__label--right.is-active) {
  color: rgb(5, 211, 5);
}
</style>